<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康养服务详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.2rem;
        }
        .action-icon {
            font-size: 1.5rem;
            color: #666;
        }
        .badge {
            background-color: #0052d9;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            margin-right: 6px;
        }
        .rating {
            color: #ff9800;
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .outline-btn {
            border: 1px solid #0052d9;
            color: #0052d9;
            background-color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .bottom-shadow {
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .tag {
            background-color: #f0f0f0;
            color: #666;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 6px;
            margin-bottom: 6px;
            display: inline-block;
        }
        .suitable-tag {
            background-color: #e6f7ff;
            color: #1890ff;
            border: 1px solid #91d5ff;
        }
        .unsuitable-tag {
            background-color: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
        }
        .step-item {
            position: relative;
            padding-left: 30px;
            margin-bottom: 16px;
        }
        .step-item::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: #e6e6e6;
        }
        .step-number {
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            background-color: #0052d9;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            z-index: 1;
        }
        .date-item {
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            text-align: center;
            font-size: 12px;
        }
        .date-item.active {
            background-color: #0052d9;
            color: white;
            border-color: #0052d9;
        }
        .time-item {
            padding: 6px 12px;
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            text-align: center;
            font-size: 12px;
        }
        .time-item.active {
            background-color: #0052d9;
            color: white;
            border-color: #0052d9;
        }
        .time-item.disabled {
            color: #d9d9d9;
            background-color: #f5f5f5;
            cursor: not-allowed;
        }
    </style>
</head>
<body class="pb-20">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../service/wellness_base_category.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">康养服务详情</h1>
        <div class="flex">
            <a href="#" class="mr-4">
                <i class="icon iconfont icon-share"></i>
            </a>
            <a href="#">
                <i class="icon iconfont icon-more"></i>
            </a>
        </div>
    </header>

    <!-- 轮播图 -->
    <div class="relative w-full h-64 bg-gray-200">
        <img src="https://via.placeholder.com/750x500?text=中医艾灸养生" class="w-full h-full object-cover" alt="康养服务图片">
        <div class="absolute bottom-4 right-4 bg-black bg-opacity-60 text-white px-2 py-1 rounded text-xs">
            1/4
        </div>
    </div>

    <!-- 服务信息 -->
    <div class="bg-white p-4">
        <h2 class="text-xl font-bold">贵州特色中医艾灸养生</h2>
        <div class="flex items-center mt-2">
            <span class="badge">热门</span>
            <span class="badge">中医养生</span>
            <span class="badge">季节推荐</span>
        </div>
        <div class="flex items-center mt-3">
            <div class="rating mr-2">★★★★★</div>
            <div class="text-sm font-medium mr-2">4.8</div>
            <div class="text-sm text-gray-500">月售520+</div>
        </div>
        <div class="flex justify-between items-center mt-3">
            <div class="text-red-500 font-medium">
                <span class="text-sm">¥</span>
                <span class="text-xl">298</span>
                <span class="text-sm text-gray-500">/60分钟</span>
            </div>
            <div class="flex">
                <button class="outline-btn mr-2">加入收藏</button>
                <button class="primary-btn">立即预约</button>
            </div>
        </div>
    </div>

    <!-- 机构信息 -->
    <div class="bg-white mt-2 p-4">
        <div class="flex items-center">
            <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
                <img src="https://via.placeholder.com/48x48?text=机构" class="w-full h-full object-cover" alt="机构头像">
            </div>
            <div class="flex-1">
                <div class="text-base font-medium">贵州中医养生馆</div>
                <div class="text-sm text-gray-500 mt-1">营业时间：09:00-21:00</div>
            </div>
            <button class="text-sm bg-blue-50 text-blue-500 px-3 py-1 rounded-full">
                查看机构
            </button>
        </div>
        <div class="flex items-center mt-3 text-sm">
            <div class="flex items-center mr-4">
                <i class="icon iconfont icon-location text-gray-400 mr-1"></i>
                <span>贵阳市云岩区中华北路与瑞金北路交叉口</span>
            </div>
            <a href="#" class="text-blue-500">
                <i class="icon iconfont icon-navigation"></i>
            </a>
        </div>
        <div class="flex items-center mt-2 text-sm">
            <div class="flex items-center mr-4">
                <i class="icon iconfont icon-phone text-gray-400 mr-1"></i>
                <span>0851-88776655</span>
            </div>
            <a href="#" class="text-blue-500">
                <i class="icon iconfont icon-phone-call"></i>
            </a>
        </div>
    </div>

    <!-- 切换标签 -->
    <div class="bg-white flex border-b border-gray-200 mt-2 sticky top-0 z-10">
        <div class="tab-item active">服务介绍</div>
        <div class="tab-item">用户评价</div>
        <div class="tab-item">预约须知</div>
    </div>

    <!-- 服务介绍 -->
    <div class="bg-white p-4">
        <h3 class="text-lg font-medium mb-3">服务内容</h3>
        <p class="text-sm text-gray-700 leading-relaxed">
            贵州特色中医艾灸养生是基于传统中医理论，结合贵州本土草药资源，融合现代康养理念的特色养生服务。采用纯手工制作的贵州山区艾草制品，配合独特的穴位选取和灸法，达到调理身体、缓解疲劳、提升免疫力的效果。
        </p>
        
        <h3 class="text-lg font-medium mb-3 mt-5">服务流程</h3>
        <div class="mb-4">
            <img src="https://via.placeholder.com/750x300?text=服务流程" class="w-full rounded-lg" alt="服务流程">
        </div>
        <div class="mt-4">
            <div class="step-item">
                <div class="step-number">1</div>
                <div class="text-sm font-medium">身体状况评估（10分钟）</div>
                <div class="text-xs text-gray-500 mt-1">专业中医师通过问诊、望诊等方式评估身体状况，确定适合的艾灸方案</div>
            </div>
            <div class="step-item">
                <div class="step-number">2</div>
                <div class="text-sm font-medium">穴位选择（5分钟）</div>
                <div class="text-xs text-gray-500 mt-1">根据评估结果，针对性选择适合的穴位组合</div>
            </div>
            <div class="step-item">
                <div class="step-number">3</div>
                <div class="text-sm font-medium">艾灸养生（40分钟）</div>
                <div class="text-xs text-gray-500 mt-1">使用贵州高山野生艾草制品，结合传统灸法进行养生调理</div>
            </div>
            <div class="step-item">
                <div class="step-number">4</div>
                <div class="text-sm font-medium">茶饮调理（5分钟）</div>
                <div class="text-xs text-gray-500 mt-1">服务结束后提供特制养生茶饮，巩固艾灸效果</div>
            </div>
        </div>
        
        <h3 class="text-lg font-medium mb-3 mt-5">功效与作用</h3>
        <p class="text-sm text-gray-700 leading-relaxed">
            艾灸养生是中医传统疗法之一，通过燃烧艾草产生的热力和药力刺激穴位，达到调理气血、温通经络、驱寒祛湿的功效。贵州特色艾灸养生特别适合体质虚寒、易疲劳、免疫力低下的人群，可以有效改善睡眠质量，缓解颈肩腰背疼痛，提升身体免疫力。
        </p>
        
        <h3 class="text-lg font-medium mb-3 mt-5">适用人群与禁忌</h3>
        <div class="mb-2">
            <div class="text-sm font-medium mb-2">适宜人群：</div>
            <div class="flex flex-wrap">
                <span class="tag suitable-tag">气血不足者</span>
                <span class="tag suitable-tag">体质虚寒者</span>
                <span class="tag suitable-tag">经常熬夜者</span>
                <span class="tag suitable-tag">颈肩腰背疼痛者</span>
                <span class="tag suitable-tag">失眠多梦者</span>
                <span class="tag suitable-tag">免疫力低下者</span>
            </div>
        </div>
        <div>
            <div class="text-sm font-medium mb-2">禁忌人群：</div>
            <div class="flex flex-wrap">
                <span class="tag unsuitable-tag">孕妇</span>
                <span class="tag unsuitable-tag">发热患者</span>
                <span class="tag unsuitable-tag">皮肤破损者</span>
                <span class="tag unsuitable-tag">出血性疾病患者</span>
                <span class="tag unsuitable-tag">恶性肿瘤患者</span>
            </div>
        </div>
    </div>

    <!-- 用户评价 -->
    <div class="bg-white p-4 mt-2">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium">用户评价(358)</h3>
            <a href="#" class="text-sm text-blue-500">查看全部 ></a>
        </div>
        
        <!-- 评价1 -->
        <div class="mb-4 pb-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/40x40?text=用户1" class="w-full h-full object-cover" alt="用户头像">
                </div>
                <div>
                    <div class="text-sm font-medium">王女士</div>
                    <div class="flex items-center mt-1">
                        <div class="rating text-xs mr-2">★★★★★</div>
                        <div class="text-xs text-gray-500">2025-06-01</div>
                    </div>
                </div>
            </div>
            <div class="text-sm text-gray-700 mt-2">
                第一次尝试艾灸，感觉非常不错！技师很专业，详细解释了每个步骤的作用，服务过程中也很舒适。特别是肩颈部分的艾灸，感觉僵硬的肌肉立刻放松了许多。服务后还送了养生茶，味道清香。强烈推荐给长期伏案工作的朋友们！
            </div>
        </div>
        
        <!-- 评价2 -->
        <div class="mb-4 pb-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/40x40?text=用户2" class="w-full h-full object-cover" alt="用户头像">
                </div>
                <div>
                    <div class="text-sm font-medium">李先生</div>
                    <div class="flex items-center mt-1">
                        <div class="rating text-xs mr-2">★★★★☆</div>
                        <div class="text-xs text-gray-500">2025-05-28</div>
                    </div>
                </div>
            </div>
            <div class="text-sm text-gray-700 mt-2">
                作为一个睡眠质量很差的人，尝试了艾灸养生后明显感觉改善了。之前总是半夜醒来，现在能够连续睡6-7个小时。服务环境也很好，干净舒适，音乐轻柔。唯一建议是温度可以再高一点，冬天有点冷。
            </div>
        </div>
        
        <!-- 评价3 -->
        <div>
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/40x40?text=用户3" class="w-full h-full object-cover" alt="用户头像">
                </div>
                <div>
                    <div class="text-sm font-medium">张女士</div>
                    <div class="flex items-center mt-1">
                        <div class="rating text-xs mr-2">★★★★★</div>
                        <div class="text-xs text-gray-500">2025-05-20</div>
                    </div>
                </div>
            </div>
            <div class="text-sm text-gray-700 mt-2">
                我是从朋友那里得知这家养生馆的，效果确实不错！常年腰酸背痛，艾灸几次后明显缓解了。特别喜欢这里使用的贵州本地艾草，感觉比其他地方的更有效。中医师也很专业，根据我的体质定制了专属方案。已经买了疗程卡，准备长期坚持。
            </div>
            <div class="mt-2">
                <img src="https://via.placeholder.com/750x300?text=评价图片" class="w-full rounded" alt="评价图片">
            </div>
        </div>
    </div>

    <!-- 预约选择 -->
    <div class="bg-white p-4 mt-2">
        <h3 class="text-lg font-medium mb-3">选择预约日期</h3>
        <div class="overflow-x-auto">
            <div class="flex space-x-3">
                <div class="date-item">
                    <div class="text-gray-500">今天</div>
                    <div class="font-medium mt-1">6月10日</div>
                </div>
                <div class="date-item active">
                    <div>明天</div>
                    <div class="font-medium mt-1">6月11日</div>
                </div>
                <div class="date-item">
                    <div class="text-gray-500">周三</div>
                    <div class="font-medium mt-1">6月12日</div>
                </div>
                <div class="date-item">
                    <div class="text-gray-500">周四</div>
                    <div class="font-medium mt-1">6月13日</div>
                </div>
                <div class="date-item">
                    <div class="text-gray-500">周五</div>
                    <div class="font-medium mt-1">6月14日</div>
                </div>
                <div class="date-item">
                    <div class="text-gray-500">周六</div>
                    <div class="font-medium mt-1">6月15日</div>
                </div>
                <div class="date-item">
                    <div class="text-gray-500">周日</div>
                    <div class="font-medium mt-1">6月16日</div>
                </div>
            </div>
        </div>
        
        <h3 class="text-lg font-medium mb-3 mt-5">选择预约时间</h3>
        <div class="grid grid-cols-4 gap-3">
            <div class="time-item disabled">09:00</div>
            <div class="time-item disabled">10:00</div>
            <div class="time-item">11:00</div>
            <div class="time-item">12:00</div>
            <div class="time-item active">14:00</div>
            <div class="time-item">15:00</div>
            <div class="time-item">16:00</div>
            <div class="time-item">17:00</div>
            <div class="time-item">18:00</div>
            <div class="time-item">19:00</div>
            <div class="time-item">20:00</div>
        </div>
        
        <div class="text-xs text-gray-500 mt-3">
            * 灰色时间段已约满，请选择其他时间
        </div>
    </div>

    <!-- 相关推荐 -->
    <div class="bg-white p-4 mt-2">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium">相关推荐</h3>
            <a href="#" class="text-sm text-blue-500">查看更多 ></a>
        </div>
        
        <div class="overflow-x-auto">
            <div class="flex space-x-3">
                <!-- 推荐服务1 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=中药足浴" class="w-full h-full object-cover" alt="推荐服务">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">中药足浴</div>
                        <div class="text-xs text-red-500 mt-1">¥198/次</div>
                    </div>
                </div>
                
                <!-- 推荐服务2 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=中医推拿" class="w-full h-full object-cover" alt="推荐服务">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">中医推拿</div>
                        <div class="text-xs text-red-500 mt-1">¥268/次</div>
                    </div>
                </div>
                
                <!-- 推荐服务3 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=拔罐疗法" class="w-full h-full object-cover" alt="推荐服务">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">拔罐疗法</div>
                        <div class="text-xs text-red-500 mt-1">¥168/次</div>
                    </div>
                </div>
                
                <!-- 推荐服务4 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=刮痧养生" class="w-full h-full object-cover" alt="推荐服务">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">刮痧养生</div>
                        <div class="text-xs text-red-500 mt-1">¥158/次</div>
                    </div>
                </div>
                
                <!-- 推荐服务5 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=养生套餐" class="w-full h-full object-cover" alt="推荐服务">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">全套养生</div>
                        <div class="text-xs text-red-500 mt-1">¥598/次</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white bottom-shadow p-3 flex justify-between items-center">
        <div class="flex items-center">
            <div class="flex flex-col items-center mr-4">
                <i class="action-icon iconfont icon-favorite"></i>
                <span class="text-xs text-gray-500">收藏</span>
            </div>
            <div class="flex flex-col items-center mr-4">
                <i class="action-icon iconfont icon-phone"></i>
                <span class="text-xs text-gray-500">咨询</span>
            </div>
            <div class="flex flex-col items-center">
                <i class="action-icon iconfont icon-share"></i>
                <span class="text-xs text-gray-500">分享</span>
            </div>
        </div>
        <div class="flex">
            <button class="outline-btn mr-2">加入收藏</button>
            <button class="primary-btn">立即预约</button>
        </div>
    </div>
</body>
</html> 